<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Select, Table } from 'ant-design-vue';
import { Edit, Plus, Trash2 } from 'lucide-vue-next';

// 响应式数据
const selectedCategory = ref('');
const categoryOptions = ref([
  { label: '资产类别', value: '' },
  { label: '房屋及建筑物', value: 'BUILD' },
  { label: '一般设备', value: 'COMMON' },
  { label: '办公设备', value: 'OFFICE' },
  { label: '其他设备', value: 'OTHER' },
  { label: '专用设备', value: 'SPECIAL' },
]);

// 资产类别表格数据
const assetCategoryData = ref([
  {
    key: '1',
    code: 'BUILD',
    name: '房屋及建筑物',
  },
  {
    key: '2',
    code: 'COMMON',
    name: '一般设备',
  },
  {
    key: '3',
    code: 'OFFICE',
    name: '办公设备',
  },
  {
    key: '4',
    code: 'OTHER',
    name: '其他设备',
  },
  {
    key: '5',
    code: 'SPECIAL',
    name: '专用设备',
  },
]);

// 表格列配置
const columns = [
  {
    title: '编码',
    dataIndex: 'code',
    key: 'code',
    width: 150,
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
  },
];

// 事件处理函数
const handleCategoryChange = (value: string) => {
  selectedCategory.value = value;
  // 筛选逻辑
};

const handleAdd = () => {
  // 新增资产类别逻辑
};

const handleEdit = (_record: any) => {
  // 编辑逻辑
};

const handleDelete = (_record: any) => {
  // 删除逻辑
};
</script>

<template>
  <Page auto-content-height>
    <!-- 页面顶部栏 -->
    <div class="mb-6 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-900">
        北京神州源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex items-center space-x-2 text-sm text-gray-600">
        <span>固定资产</span>
        <span>></span>
        <span class="text-blue-600">类别及增减方式</span>
      </div>

      <!-- 右侧标签页区域 -->
      <div class="flex items-center space-x-2">
        <div class="rounded bg-blue-100 px-3 py-1 text-sm text-blue-600">
          类别及增减方式
        </div>
        <div class="rounded bg-gray-100 px-3 py-1 text-sm text-gray-600">
          报税
        </div>
        <div class="rounded bg-gray-100 px-3 py-1 text-sm text-gray-600">
          辅助核算明细账
        </div>
      </div>
    </div>

    <!-- 操作与筛选区 -->
    <div
      class="mb-6 flex items-center justify-between rounded-lg bg-white p-4 shadow-sm"
    >
      <div class="flex items-center space-x-4">
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-700">资产类别：</span>
          <Select
            v-model:value="selectedCategory"
            :options="categoryOptions"
            class="w-40"
            placeholder="资产类别"
            @change="handleCategoryChange"
          />
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <Button type="primary" @click="handleAdd">
          <Plus class="mr-1 h-4 w-4" />
          新增
        </Button>
      </div>
    </div>

    <!-- 资产类别表格 -->
    <div class="rounded-lg bg-white p-4 shadow-sm">
      <Table
        :columns="columns"
        :data-source="assetCategoryData"
        :pagination="false"
        :scroll="{ y: 400 }"
        size="middle"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <div class="flex items-center space-x-2">
              <Button size="small" type="link" @click="handleEdit(record)">
                <Edit class="mr-1 h-3 w-3" />
                编辑
              </Button>
              <Button
                danger
                size="small"
                type="link"
                @click="handleDelete(record)"
              >
                <Trash2 class="mr-1 h-3 w-3" />
                删除
              </Button>
            </div>
          </template>
        </template>
      </Table>
    </div>
  </Page>
</template>

<style scoped>
.ant-table-thead > tr > th {
  padding: 12px;
  background-color: #fafafa;
  font-weight: 600;
}

.ant-table-tbody > tr > td {
  padding: 12px;
}

.ant-table-tbody > tr:hover > td {
  background-color: #f5f5f5;
}
</style>